<template>
  <div>
    <el-card shadow='never'>
      <template #header>
        <div>
          我的数据
        </div>
      </template>
      <el-form ref='formRef' :inline='true' :model='searchForm' label-width='80px'>
        <el-form-item label='视频号ID' prop='video_id'>
          <el-input v-model='searchForm.video_id' />
        </el-form-item>
        <el-form-item label='微信ID' prop='wechat_id'>
          <el-input v-model='searchForm.wechat_id' />
        </el-form-item>
        <el-form-item label='员工姓名' prop='wechat_id'>
          <el-input v-model='searchForm.user_name' />
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='query'>搜索</el-button>
          <el-button type='' @click='resetQuery'>重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary">【{{searchCount}}】</el-link>条
        </el-form-item>
      </el-form>
      <el-table :data='tableData' border stripe style='width: 100%' @sort-change='sortChange'
                :default-sort="{ prop: 'canupdate', order: 'ascending' }">
        <el-table-column prop='id' label='ID'/>
        <el-table-column prop='user_id' label='员工ID'/>
        <el-table-column prop='departmentname' label='部门' />
        <el-table-column prop='user_name' label='员工姓名'>
          <template #default='{ row }'>
            <div>
              {{ row.username }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='video_id' label='视频号ID' sortable='custom' />
        <el-table-column prop='video_nickname' label='视频号昵称'/>
        <el-table-column prop='wechat_id' label='微信ID' sortable='custom' />
        <el-table-column prop='order_img' label='截图'>
          <template #default='{ row }'>
            <div>
              <el-popover placement='right' :width='400' trigger='hover'>
                <template #reference>
                  <el-image :src='row.order_img' style='width:40px;'></el-image>
                </template>
                <el-image :src='row.order_img' style='width:375px;'></el-image>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='canupdate' label='可修改' width='80'>
          <template #default='{ row }'>
            <el-tag class='ml-2' type='success' v-if='row.canupdate'>是</el-tag>
            <el-tag class='ml-2' v-else type='info'>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='start_at' label='开始时间'>
          <template #default='{ row }'>
            {{ row.start_at }}
          </template>
        </el-table-column>
        <el-table-column prop='expired_at' label='过期时间'>
          <template #default='{ row }'>
            {{ row.expired_at }}
          </template>
        </el-table-column>
        <el-table-column prop='created_at' label='创建时间' />
        <el-table-column prop='updated_at' label='更新时间' />
        <el-table-column label='修改'>
          <template #default='{ row }'>
            <div>
              <el-button type='primary' @click='edit(row)' :disabled='row.canedit==false'>修改</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class='mt-3' :current-page='currentPage'
                     @current-change='handleCurrentChange' background :total='pageObj.total'
                     :page-size='pageObj.pageSize'
                     layout='total,prev, pager, next' />
    </el-card>
    <el-dialog v-model='dialogVisible' title='修改记录' width='30%'>
      <el-form ref='ruleFormRef' :model='form' label-width='120px' style='max-width: 460px' :rules='rules'
               status-icon>
        <el-form-item label='微信ID' prop='wechat_id'>
          <el-input v-model='form.wechat_id' disabled />
        </el-form-item>
        <el-form-item label='视频号ID' prop='video_id'>
          <el-input v-model='form.video_id' />
        </el-form-item>
        <el-form-item label='视频号昵称' prop='video_nickname'>
          <el-input v-model='form.video_nickname' />
        </el-form-item>

        <el-form-item label='成交截图' prop='order_img'>
          <hd-upload-single-image :disabled='!form.canupdate' class='cursor-not-allowed'
                                  v-model='form.order_img'></hd-upload-single-image>
          <el-alert v-if='!form.canupdate' title='未到达30天,截图不能修改' type='warning' style='width:280px;'
                    :closable='false' />
        </el-form-item>
        <el-form-item label='备注' prop='remark'>
          <el-input v-model='form.remark' type='textarea' />
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='onSubmit(ruleFormRef)'>提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

const { index, update, destory } = useRecord()

const dialogVisible = ref(false)
const tableData = ref([])
const pageObj = reactive({
  total: 0,
  pageSize: 0,
  pagerCount: 0,
  currentPage: 0,
})
// 表格排序
const sortChange = async (e: any) => {
  const {order,prop}=e
  if(order==null){return}
  searchForm.prop=prop
  searchForm.order=order
  await getData(currentPage.value, searchForm)
}
const currentPage = ref(1)
const searchCount=ref(0)
const getData = async (page: number = 1, obj: Object = {}) => {
  currentPage.value = page
  let { data } = await index(page, obj)
  tableData.value = data.data.data
  pageObj.total = data.data.total
  pageObj.currentPage = data.data.current_page
  pageObj.pageSize = data.data.per_page
  searchCount.value=data.count
}
onMounted(() => {
  getData()
})
const handleCurrentChange = async (val: number) => {
  await getData(val, searchForm)
}
const edit = (row: any) => {
  dialogVisible.value = true
  form = row
}

//表单
const ruleFormRef = ref<FormInstance>()

let form = reactive<RecordModel>({
  id: 0,
  user_id: 0,
  wechat_id: '',
  video_id: '',
  video_nickname: '',
  order_img: '',
  remark: '',
  canupdate: false,
  expired_at: '',
  created_at: '',
  updated_at: '',
})

const rules = reactive<FormRules<RecordModel>>({
  wechat_id: [
    {
      required: true,
      message: '请填写微信ID',
      trigger: 'change',
    },
  ],
  video_id: [
    {
      required: true,
      message: '请上传视频号ID',
      trigger: 'change',
    },
  ],
  order_img: [
    {
      required: true,
      message: '请上传截图',
      trigger: 'change',
    },
  ],
})
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    console.log('formEl!')
    return
  }
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')
      await update(form).then(async _ => {
        dialogVisible.value = false
        clear(formEl)
        await getData(currentPage.value, searchForm)
      })
    }
  })

}
const clear = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
}
const query = async () => {
  if (searchForm.video_id || searchForm.wechat_id||searchForm.user_name) {
    console.log(searchForm)
    let { data } = await index(1, searchForm)
    tableData.value = data.data.data
    pageObj.total = data.data.total
    pageObj.currentPage = data.data.current_page
    pageObj.pageSize = data.data.per_page
    searchCount.value=data.count
  } else {
    ElMessage.warning('请输入内容')
  }
}
let searchForm = reactive({
  video_id: '',
  wechat_id: '',
  user_name:'',
  prop: '',
  order: ''
})
const formRef = ref()

const resetQuery = async () => {
  formRef.value.resetFields()
  // searchForm恢复默认值
  searchForm.video_id = ''
  searchForm.wechat_id = ''
  searchForm.user_name = ''
  searchForm.prop = ''
  searchForm.order = ''
  await getData()
}
</script>

<style lang='scss' scoped></style>